<!-- 银证记录 -->
<template>
	<view class="yzl-container">
    <t-header @back="clickNavBackFn">银证转账记录</t-header>
		<!-- content -->
		<view class="yzl-content">
			<!-- tabs -->
			<view class="yzl-content-tabs">
				<view
					v-for="(item, index) in tabs"
					:key="index"
					@click="clickTabItemFn(index)"
					class="yzl-content-tab"
					:class="{'yzl-content-tab-selected': tabIndex === index}"
				>{{ item.name }}</view>
			</view>
			<!-- components -->
			<view class="yzl-content-comp">
				<swiper :current="tabIndex" @change="changeSwiperFn" :style="{'height': `${height}rpx`}">
					<swiper-item v-for="(tab, i) in tabs" :key="i">
						<component
							:ref="`transfer${i}`"
							:is="tab.comp"
							:config="config"
							:index="tabIndex"
							:tabs="tabs"
							:height="height"
							@submit="inOrOut"
						/>
					</swiper-item>
				</swiper>
			</view>
			
			<payModal ref="payRef" @ok="payFn" @closesubmits="closesubmits" />
		</view>
	</view>
</template>

<script setup>
import {ref, nextTick} from 'vue';
import {onLoad} from '@dcloudio/uni-app';

// components
import transferInLog from './components/transferInLog.vue';
import transferOutLog from './components/transferOutLog.vue';
import payModal from '../../components/work/payModal.vue';
import THeader from '@/components/views/t-header/index.vue'; // 头部组件

// store
import {useMainStore} from '@/store/main.js';
// main
const mainStore = useMainStore();

// api
import {applyWithdraw} from '@/api/user.js';
import {bankConfig} from '@/api/index.js';

// height
const height = ref(0);
// tab index
const tabIndex = ref(0);
// tabs
const tabs = [{name: '银证转入记录', comp: transferInLog}, {name: '银证转出记录', comp: transferOutLog}];
// config
const config = ref(null);

onLoad((options) => {
	// height.value = uni.getSystemInfoSync().windowHeight - uni.upx2px(366) + 'px';
	height.value = 1258;
	
	if (options.tabIndex) {
		tabIndex.value = options.tabIndex * 1;
	}
	changeSwiperFn({detail: {current: 0}});
	
	bankConfig().then(res => {
		config.value = res.data;
	});
	
	mainStore.getConfig();
});

// 点击返回
const clickNavBackFn = () => {
	const pages = getCurrentPages();
	if (pages.length >= 2) {
		uni.navigateBack();
	} else {
		uni.switchTab({
			url: '/pages/my/index'
		});
	}
};

// tab item click事件
const clickTabItemFn = (index) => {
	tabIndex.value = index;
};

// swiper change事件
const changeSwiperFn = (e) => {
	tabIndex.value = e.detail.current;
	
	nextTick(() => {
		if (e.detail.current === 0) {
			transfer0.value[0].getListFn();
		} else if (e.detail.current === 1) {
			transfer1.value[0].getListFn();
		}
	});
};

const exChangeType = ref('');
const exChangeData = ref(null);
const payRef = ref(null);
const transfer0 = ref(null);
const transfer1 = ref(null);

const inOrOut = (e) => {
	exChangeType.value = e.type;
	exChangeData.value = e.data;
	payRef.value.open();
};

const payFn = (pwd) => {
	if (exChangeType.value == 'out') {
		out(pwd);
	}
};

const out = (pass) => {
	applyWithdraw({
		...exChangeData.value,
		pass
	}).then(res => {
		uni.showModal({
			title: '提示',
			content: res.msg,
			showCancel: false,
			cancelColor: "#555",
			success(res) {
				transfer1.value[0].unsbumiting();
			}
		})
	});
};

const closesubmit = () => {
	transfer1.value[0].unsbumiting();
};

const closesubmits = () => {
	transfer1.value[0].unsbumiting();
};
</script>

<style lang='scss' scoped>
.yzl-container {
	display: flex;
	flex-direction: column;
	width: 100vw;
	height: 100vh;
	background: #F5F5F5;
	box-sizing: border-box;

	.yzl-content {
		flex: 1;
		display: flex;
		flex-direction: column;
		margin: 0 18rpx 26rpx;
		border-radius: 34rpx;
		background: #FFFFFF;
		
		.yzl-content-tabs {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 124rpx;
			padding: 0 52rpx;
			border-radius: 17px 17px 0 0;
			background: linear-gradient( 180deg, #FFFFFF 0%, #F7E9E9 100%);
			
			.yzl-content-tab {
				color: #8F8F8F;
				font-size: 36rpx;
				font-weight: 400;
				font-family: PingFangSC, PingFang SC;
				
				&.yzl-content-tab-selected {
					position: relative;
					color: #000000;
					font-size: 40rpx;
					transition: all 0.2s linear;
					
					&::after {
						content: '';
						position: absolute;
						top: 64rpx;
						left: 50%;
						width: 58rpx;
						height: 8rpx;
						border-radius: 22rpx;
						background: #F74E51;
						transform: translateX(-50%);
					}
				}
			}
		}
	
		.yzl-content-comp {
			flex: 1;
			padding: 18rpx 24rpx;
			box-sizing: border-box;
		}
	}
}
</style>
